<template>
  <div>
    <h2>count:{{$store.state.count}}</h2>
    <h2>count-getters:{{$store.getters.count10}}</h2>
    <button @click="$store.commit('setcount')">count++</button>
    <div id="test"></div>
    <h1>{{ title }}</h1>
    <h2>{{ titleX3 }}</h2>
    <button @click="changeTit">reserve title</button>
    <div>
      <div class="page">
        <Counter />
      </div>
      <div class="page">
        <!--        <Counter />-->
      </div>
      <div class="page"></div>
      <div class="page"></div>
      <div class="page"></div>
    </div>
  </div>
</template>

<script>
  /*
   * 数据驱动
   * 虚拟dom
   * 单页面应用
   * */

  // 虚拟dom

  /*
  // beforeCreate()
  let div = document.createElement('div')
  let h1 = document.createElement('h1')
  h1.textContent = title
  // created()

  // beforeMount()
  div.append(h1)
  $('#app').append(div)
  // mounted()


  Page beforeCreate
  Page created
  Page beforeMount
  Component beforeCreate ==========
  Component created ==========
  Component beforeMount ==========
  Component mounted ==========
  Page mounted

  Page beforeDestroy
  Component beforeDestroy ==========
  Component destroyed ==========
  Page destroyed
  */
  import Counter from "@/components/Counter";
  export default {
    name: "BMI",
    components: {
      Counter
    },
    data() {
      return {
        title: 'Hello BMI'
      }
    },
    computed: {
      titleX3() {
        return this.title.repeat(3)
      }
    },
    methods: {
      changeTit() {
        this.title = this.title.split('').reverse().join('')
      }
    },
    // 接收父组件使用此组件时以自定义属性传过来的数据
    // props: {},
    created() {
      console.log('created')
    },
    mounted() {
      console.log('mounted')
      /*console.log('================')
      console.log(document.getElementById('test'))
      document.documentElement.onscroll = document.body.onscroll = window.onscroll = function() {
        console.log(document.documentElement.scrollTop)
      }*/
    },
    updated() {
      console.log('updated')
    },
    destroyed() {
      console.log('destroyed')
    },
    beforeCreate() {
      console.log('beforeCreate')
    },
    beforeMount() {
      console.log('beforeMount')
    },
    beforeUpdate() {
      console.log('beforeUpdate')
    },
    beforeDestroy() {
      console.log('beforeDestroy')
    }
  };
</script>

<style scoped lang="stylus">
</style>